<template>
  <el-row style="margin-bottom: 10px">
    <span>实时疫情数据展示&nbsp;&nbsp;{{ updateTime }}</span>
  </el-row>
  <el-row :gutter="10" style="margin-bottom: 40px" class="Main_one">
    <el-col :span="6" :xs="12" :sm="8" :md="6">
      <el-card style="color: #409eff">
        <p>确诊人数</p>
        <div>{{ confirm }}</div>
      </el-card>
    </el-col>
    <el-col :span="6" :xs="12" :sm="8" :md="6">
      <el-card style="color: #67c23a">
        <p>输入病例</p>
        <div>{{ input }}</div>
      </el-card>
    </el-col>
    <el-col :span="6" :xs="12" :sm="8" :md="6">
      <el-card style="color: #e6a23c">
        <p>治愈病例</p>
        <div>{{ heal }}</div>
      </el-card>
    </el-col>
    <el-col :span="6" :xs="12" :sm="24" :md="6">
      <el-card style="color: #f56c6c">
        <p>死亡人数</p>
        <div>{{ dead }}</div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="10" style="margin-bottom: 40px" class="Main_two">
    <el-col :span="12" :xs="24">
      <el-card> <line-charts></line-charts></el-card>
    </el-col>
    <el-col :span="12" :xs="24">
      <el-card> <china-map style="height: 500px"></china-map></el-card>
    </el-col>
  </el-row>
  <el-row :gutter="10" class="Main_three">
    <el-col :span="15" :xs="24">
      <el-card><pie-charts></pie-charts></el-card>
    </el-col>
    <el-col :span="9" :xs="24">
      <el-card> <bar-charts></bar-charts> </el-card>
    </el-col>
  </el-row>
</template>

<script>
// Echarts图表

import ChinaMap from '@/components/Map/ChinaMap.vue'
import BarCharts from '@/components/Chart/BarCharts.vue'
import PieCharts from '@/components/Chart/PieCharts.vue'
import LineCharts from '@/components/Chart/LineCharts.vue'

export default {
  emits: ['refreshUser'],
  name: 'covid_screen',
  data() {
    return {
      confirm: 0,
      input: 0,
      heal: 0,
      dead: 0,
      updateTime: this.timeformat(new Date())
    }
  },
  //页面元素渲染之后再触发

  components: {
    ChinaMap,
    BarCharts,
    PieCharts,
    LineCharts
  },
  created() {
    this.load()
  },
  methods: {
    timeformat(time) {
      return this.$moment(time).format('yyyy-MM-DD HH:ss')
    },
    load() {
      this.$http.get('/china_total').then((res) => {
        console.log('首页')
        console.log(res)
        this.confirm = res.data.confirm
        this.input = res.data.input
        this.heal = res.data.heal
        this.dead = res.data.dead
        this.updateTime = this.timeformat(res.data.updateTime)
      })
    }
  }
}
</script>

<style lang="less" scoped>
#pie {
  height: 500px;
}
span {
  font-size: 16px;
  font-weight: 800;
  text-shadow: 5px 5px 5px rgba(205, 205, 205, 0.753);
}
.Main_one {
  .el-col {
    .el-card {
      font-weight: 800;
      p {
        font-weight: 800;
        font-size: 14px;
      }
      div {
        padding: 10px 0;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .Main_one {
    margin-bottom: 10px !important;
    .el-col:nth-child(-n + 2) {
      margin-bottom: 20px;
    }
  }
}

@media only screen and (max-width: 992px) {
  .Main_one {
    .el-col:nth-child(-n + 3) {
      margin-bottom: 20px;
    }
  }
  .Main_two {
    .el-col:nth-child(1) {
      margin-bottom: 10px;
    }
  }
  .Main_three {
    .el-col:nth-child(1) {
      margin-bottom: 10px;
    }
  }
}
</style>